<template>
  <div class="education" style="margin-top: 80px">
    <side-navigation />

    <public-txt id="vocational_education">
      <h1 slot="c-txt">职业教育</h1>
      <p slot="e-txt">vocational education</p>
    </public-txt>

    <vocational-education :EducationList="EducationList" />

    <public-txt id="expert_training">
      <h1 slot="c-txt">专家培训</h1>
      <p slot="e-txt">expert training</p>
    </public-txt>

    <expert-training
      :TrainingList1="TrainingList1"
      :TrainingList2="TrainingList2"
    />

    <public-txt id="flexible_application">
      <h1 slot="c-txt">灵活应用</h1>
      <p slot="e-txt">Flexible application</p>
    </public-txt>

    <flexible-application :FlexibleApplicationList="FlexibleApplicationList" />

    <floor />
  </div>
</template>

<script>
import SideNavigation from "components/SideNavigation/SideNavigation";

import PublicTxt from "components/PublicTxt/PublicTxt";
import VocationalEducation from "./VocationalEducation/VocationalEducation";
import ExpertTraining from "./ExpertTraining/ExpertTraining";
import FlexibleApplication from "./FlexibleApplication/FlexibleApplication";

import Floor from "components/Floor/Floor";

export default {
  name: "Education",
  components: {
    SideNavigation,
    PublicTxt,
    VocationalEducation,
    ExpertTraining,
    FlexibleApplication,
    Floor,
  },
  data() {
    return {
      TrainingList1: [
        {
          title: "辅导专家",
          p: "一对一在线辅导，各科高效提分",
        },
        {
          title: "职业助手",
          p: "智能提示，教育无忧",
        },
        {
          title: "职业技巧",
          p: "全程跟踪反馈 加强沟通更放心",
        },
      ],
      TrainingList2: [
        {
          title: "心理咨询",
          p: "缓解职业压力 激活个人能力",
        },
        {
          title: "讲解疑问",
          p: "提前安排讲解 实时答疑解惑",
        },
        {
          title: "专家大咖",
          p: "信息及时分享 专家直播解密",
        },
      ],
      FlexibleApplicationList: [
        {
          src:
            "http://www.guohuihr.cn/uploadfile/2020/1103/1ae95a61775d4bc.png",
          title: "时间灵活",
          content:
            "帮助大家合理运用碎片时司提前预约专家1对1辅导省时省力。提高学习效率",
        },
        {
          src:
            "http://www.guohuihr.cn/uploadfile/2020/1103/24fd05c7bfe646a.png",
          title: "范围灵活",
          content:
            "覆盖全国各地大小公司范围,根据最新变动调节范围。更好的灵活调节范围。",
        },
        {
          src:
            "http://www.guohuihr.cn/uploadfile/2020/1103/3daa85746ca2910.png",
          title: "学习灵活",
          content: "不同的人学习能力不尽相同,专家会提前准备内容让大家阅览。",
        },
        {
          src:
            "http://www.guohuihr.cn/uploadfile/2020/1103/b4045ba48126086.png",
          title: "材料灵活",
          content:
            "辅导资料库等覆盖全国各地大小公司全科材料。轻松帮助大家灵活应用的材料。",
        },
      ],
      EducationList: [
        {
          src:
            "https://www.guohuihr.cn/uploadfile/2020/1113/a85773d9ba4c8f5.png",
          p1: "免费提升学历",
          p2: "根据个人学习结果及时调整学习方案",
          p3: "针对性定期检测学习结果",
        },
        {
          src: "https://www.guohuihr.cn/uploadfile/2020/1113/224d0b1bb471f.png",
          p1: "职业技能提升",
          p2: "教育背景  学习状况  作业情况",
          p3: "免费测评  过往错题  平时考卷",
        },
        {
          src:
            "https://www.guohuihr.cn/uploadfile/2020/1113/6a2642f387bbf4d.png",
          p1: "针对个人情况定制个性化辅导",
          p2: "个人性格 学习方法 应试心理",
          p3: "学习技巧 学习习惯 知识薄弱点",
        },
      ],
    };
  },

  mounted() {
    this.$store.commit("i1click");
    // console.log(this.$route);
    document.querySelector(`#${this.$route.query.id}`).scrollIntoView(true);
  },
  watch: {
    "$route.query.id": (newVal, oldVal) => {
      console.log(newVal, oldVal);
      document.querySelector(`#${newVal}`).scrollIntoView(true);
      this.$store.commit("i1click");

    },
  },
};
</script>